<template>
 <el-dialog  title="系统账号注册"
    :visible.sync="registerVisible"
    width="1000px"
    :append-to-body='true'
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="close"
    :center="true">
   <div class="register"> 
     <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
     <div class="registerbox">
         <div class="left">
         <!-- <el-form  label-width="100px" class="demo-ruleForm"> -->
            <el-form-item label="作者姓名" prop="studentName">
                <el-input v-model="ruleForm.studentName" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="identitycard">
                <el-input v-model="ruleForm.identitycard" size="mini"></el-input>
            </el-form-item>
          <el-form :model="ruleForm.commonUser" :rules="rules" ref="ruleForm.commonUser" label-width="100px" class="demo-ruleForm">
            <el-form-item label="登陆账号"  prop="username">
                <el-input v-model="ruleForm.commonUser.username" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="登陆密码"  prop="password">
                <el-input @blur="changetype" :type="inputtype" ref="passwords" v-model="ruleForm.commonUser.password" size="mini" ></el-input>
            </el-form-item>
        </el-form>
     </div>
     <div class="right">
         <!-- <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> -->
            <el-form-item label="性别" prop="sex">
                <el-select v-model="ruleForm.sex" size="mini" placeholder="请选择性别">
                    <el-option label="男" value="男" name="sex"></el-option>
                    <el-option label="女" value="女" name="sex"></el-option>
                </el-select>
            </el-form-item>
             <el-form-item label="手机号码" prop="phone">
                <el-input v-model="ruleForm.phone" size="mini"></el-input>
            </el-form-item>
            <!-- <el-form-item label="年龄" prop="age">
                <el-input v-model="ruleForm.age" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="家庭电话" prop="familynum">
                <el-input v-model="ruleForm.homephone" size="mini"></el-input>
            </el-form-item> -->
            <el-form-item label="E-mail" prop="email">
                <el-input v-model="ruleForm.email" size="mini"></el-input>
            </el-form-item>
            
        <!-- </el-form> -->
     </div>
     </div>
     </el-form>
     <div style="text-align:center">
        <el-button @click="from"  type="primary" size="small" style="width:80px;" >确定</el-button>
     </div>
   </div>
</el-dialog>

</template>

<script type="text/ecmascript-6">
import SIdentify from './code'
export default {
  props: {
    registerVisible: Boolean
  },
  data() {
    return {
      inputtype: 'text',
      ruleForm: {
        studentName: "",
        identitycard: "",
        phone: "",
        sex: "",
        age: "",
        homephone: "",
        email: "",
        testcode: "",
        commonUser: {
          username: "",
          password: ""
        }
      },
      rules: {
        username: [
          { required: true, message: "请输入帐号", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" }
        ],
        studentName: [
          { required: true, message: "请输入作者姓名", trigger: "blur" }
        ],
        identitycard: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          {
            pattern: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
            message: "您输入的身份证号码有误",
            trigger: "blur"
          }
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[34578]\d{9}$/,
            message: "您输入的手机号不正确",
            trigger: "blur"
          }
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
        email: [
          { required: true, message: "请输入您的e-mail", trigger: "blur" },
          {
            pattern: /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/,
            message: "您的邮箱格式有错误",
            trigger: "blur"
          }
        ],
        testcode: [{ required: true, message: "请输入验证码", trigger: "blur" }]
      }
    };
  },
  methods: {
    close() {
      this.$emit('close')
    },
    changetype() {
      this.inputtype = 'password'
    },
    from() {
      let data = {
        data: this.ruleForm,
        isShow: false
      };
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          // login(usertype, this);
          this.$refs["ruleForm.commonUser"].validate(valid => {
            if(valid) {
              this.$emit("showRuleForm", data);
            } else {
              return
            }
          })
        } else {
          return false;
        }
      });
      
    }
  },
  components: {
    SIdentify
  }
};
</script>

<style scoped lang="scss">
@import "./register.scss";
</style>
